<template>
  <view>
    <van-overlay :show="show">
      <view class="wrapper">
        <view class="block">
          纳场村详情
          <van-icon class="clearIcon" name="clear" @click="onClickHide" />

          <view class="tableContent">
            <table stripe emptyText="暂无更多数据" class="tableClass">
              <!-- 表头行 -->
              <thead>
                <tr class="headTr">
                  <th align="center" style="width: 168rpx">村庄名称</th>
                  <th align="center" style="width: 428rpx">村庄位置</th>
                </tr>
              </thead>
              <!-- 表格数据行 -->
              <tbody class="tableBody">
                <tr v-for="(row,index) in villageNachangeList" :key="row.id" class="contentClass">
                  <!-- class="No" @click="copyNo(JSON.stringify(row))" -->
                  <td align="center" class="type" style="width: 168rpx">
                    {{ row.villageName !== null ? row.villageName: '/' }}</td>
                  <td align="center" style="width: 428rpx" class="type">
                    {{ row.wholeDepartName !== null ? row.wholeDepartName: '/' }}
                  </td>
                </tr>
                <van-empty v-if="!villageNachangeList.length" description="暂无数据" />

              </tbody>
            </table>
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import { getVillageList } from '@/api/manage'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    areaId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      villageNachangeList: [],
      queryparams: {
        _t: new Date().getTime(),
        // areaId: null,
        attr: 1,
        pageNo: 1,
        pageSize: 1000,
        column: 'createTime',
        order: 'desc',
        field: 'id,,,villageName,areaId_dictText,attr_dictText,farmersNum,terminalNum,pipLength,enterpriseId_dictText,operatorIdsLabel,qr,action'
      }
    }
  },
  watch: {
    areaId: {
      handler: function (val) {
        console.log(val, 'val-获取区域id')
        setTimeout(() => {
          if (val) this.getVillageList()

        }, 1000)
      },
      immediate: true
    }
  },
  onLoad() { },
  methods: {
    copyNo(row) {
      const { equNo } = JSON.parse(row)
      // console.log(equNo, row, 'equNo')
      uni.setClipboardData({
        data: equNo,
        success: function () {
          console.log('success', row);
        }
      });
    },
    getVillageList() {
      getVillageList({
        attr: 1,
        pageNo: 1,
        pageSize: 1000,
        column: 'createTime',
        order: 'desc',
        field: 'id,,,villageName,areaId_dictText,attr_dictText,farmersNum,terminalNum,pipLength,enterpriseId_dictText,operatorIdsLabel,qr',
        newAreaId: this.areaId,
        _t: new Date().getTime()
      }).then(res => {
        console.log('获取纳场村详情', res)
        this.villageNachangeList = res.data.result?.records || []
      })
    },
    onClickHide() {
      uni.$emit('hideDeviceDialog')
    },
  }
}
</script>

<style lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  height: 534rpx;
  background-color: #fff;
  border-radius: 23rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
  position: relative;
  text-align: center;
  padding: 32rpx 0;
  .clearIcon {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    color: rgba(74, 74, 74, 0.73);
    // font-size: 28rpx;
  }
  .tableContent {
    margin-top: 48rpx;
    .tableClass {
      width: 100%;
      thead {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
      .headTr {
        font-weight: bold;
        font-size: 24rpx;
        color: #4a4a4a;
        height: 80rpx;
        letter-spacing: 0;
        line-height: 80rpx;
      }
      .tableBody {
        // width: 100%;
        display: block;
        max-height: 320rpx;
        overflow-y: auto;
      }
      tr {
        display: flex;
        width: 100%;
        table-layout: fixed;
        align-items: center;
      }
      thead th {
        // background: #f5f5f5;
        position: sticky;
        top: 0;
      }
      .contentClass {
        height: 80rpx;

        .No {
          font-size: 20rpx;
          color: #3c8aff;
          text-decoration-line: underline;
        }
        .type {
          font-weight: 800;
          font-size: 24rpx;
          color: #4a4a4a;

          white-space: wrap;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
          letter-spacing: 0;
          text-align: center;
        }
        .sum {
          font-weight: 800;
          font-size: 24rpx;
          color: #989898;
        }
        .date {
          font-weight: 800;
          font-size: 20rpx;
          color: #989898;
        }
        .omUnit {
          font-weight: 800;
          font-size: 24rpx;
          color: #989898;
        }
        .status {
          font-weight: 800;
          font-size: 24rpx;
        }
        .success {
          color: #74cdaf;
          white-space: nowrap;
        }
        .warning {
          color: #fbd333;
          white-space: nowrap;
        }
      }
      .contentClass:nth-child(2n) {
        background: #fff;
      }
      .contentClass:nth-child(2n + 1) {
        background: #eff6fc;
      }
    }
  }
}
</style>